<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf模板</title>
</head>
<body>

<p th:text="${welcome}">p标签这里会显示动态页面</p>
<div th:text="${welcome}">这里会显示动态页面</div>
<span th:text="${welcome}">这里会显示动态页面</span>

<hr title="th:text和th:utext的区别，解析文本的HTML标签">
<h2>th:text和th:utext的区别，解析文本的HTML标签</h2>
<div th:text="${welcome1}"></div>
<hr title="th:utext，解析文本的HTML标签">
<div th:utext="${welcome1}"></div>

<hr title="获取标签动态name属性值，默认value值,th:name,th:value">
<h2>获取标签动态name属性值，默认value值,th:name,th:value</h2>
<input type="text" th:name="${attrName}" th:value="${student.age}">

<hr>
<p><h2>变量表达式th:text="${类或类.属性}</h2></p>
<div th:text="${student}">显示学生类：</div>
<div th:text="${student.name}">显示学生姓名：</div>
<div th:text="${student.age}">显示学生年龄：</div>
<hr>

<p><h2>选择表达式th:object="${类}，th:text="*{属性</h2>}</p>
<div th:object="${student}">
    <p>姓名:<span th:text="*{name}"></span> </p>
    <p>年龄:<span th:text="*{age}"></span> </p>
</div>

<hr>
<p>选择表达式th:text="*{类.属性}</p>
<p>姓名:<span th:text="*{student.name}"></span></p>
<p>年龄:<span th:text="*{student.age}"></span> </p>

<hr>
<p>url:路径访问</p>
<hr>
<p>直接访问a href="http://localhost:8080/xxx/find?name=张三"</p>
<a href="http://localhost:8080/xxx/find?name=张三">查询</a>
<a href="http://localhost:8080/xxx/find?name=张三">查询2</a>
<a href="http://localhost:8080/xxx/find?name=张三&amp;age=23">查询3</a>
<hr>

<p>以/开头的相对地址访问 th:href="@{|/find?name=${student.name}|}</p>
<a th:href="@{|/find?name=${student.name}|}">查询4</a>
<a th:href="@{|/find?name=${student.name}&age=${student.age}|}">查询5</a>
<hr>

<p>不以/开头的相对地址th:href="@{|find?name=${student.name}|}</p>
<a th:href="@{|find?name=${student.name}|}">查询6</a>
<hr>

<p>th:if用法</p>
<p th:if="${gender}=='male'">男 </p>
<hr>

<p>th:switch用法</p>
<div th:switch="${age/10}">
    <p th:case="0">儿童</p>
    <p th:case="1">青少年</p>
    <p th:case="2">青年</p>
    <p th:case="3">中青年</p>
    <p th:case="4">中年</p>
    <p th:case="5">中老年</p>
    <p th:case="*">老年</p>


    <hr>
    <p>遍历List，th:each="stu:${studentList}"，th:text="${stu.name}"</p>
    <p th:each="stu:${studentList}">
        姓名：<span th:text="${stu.name}"></span>
        年龄：<span th:text="${stu.age}"></span>
    </p>


    <hr>
    <p>遍历状态对象1:count----th:each="stu,xxx:${studentList}"，
        th:text="${xxx.count}th:text="${stu.name}"</p>
    <p th:each="stu,xxx:${studentList}">
        <span th:text="${xxx.count}"></span>
        姓名：<span th:text="${stu.name}"></span>
        年龄：<span th:text="${stu.age}"></span>
    </p>

    <hr>
    <p>遍历状态对象2stuStat.index----th:each="stu:${studentList}"，
        th:text="${stuStat.index},th:text="${stu.name}"</p>
    <p th:each="stu:${studentList}">
        <span th:text="${stuStat.index}"></span>
        姓名：<span th:text="${stu.name}"></span>
        年龄：<span th:text="${stu.age}"></span>
    </p>


    <hr>
    <p>遍历Map----th:each="entry:${stuMap}，
        th:text="${entryStat.count},th:text="${entry.key},
        th:text="${entry.value},th:text="${entry.value.name} "
        th:text="${entry.value.age}</p>
    <p th:each="entry:${stuMap}">
        <span th:text="${entryStat.count}"></span>
        <span th:text="${entry.key}"></span>
        <span th:text="${entry.value}"></span>
        年龄：<span th:text="${entry.value.name}"></span>
        年龄：<span th:text="${entry.value.age}"></span>

    </p>

<hr title="图片的添加">
    <h2>图片的添加,th:src="@{|/images/${photo}|}</h2>
    <img th:src="@{|/images/${photo}|}"/>

    <hr>
    <h2>内连属性：该方法使动态数据值，他的名字是：内容覆盖，只会显示一个名字</h2>
    <p th:text="${student.name}">
        他的名字是：
    </p>

    <hr>
    <h2>内连文本：该方法会正确显示th:inline="text" </h2>
    <p th:inline="text" >
        他的名字是：[[${student.name}]]
    </p>

    <hr>
    <h2>内连文本：该方法会正确显示,直接显示</h2>
    <p>
        我的名字是：[[${student.name}]]
    </p>

    <hr>
    <h2>内连脚本：th:inline="javascript" type="text/javascript"</h2>
    <script th:inline="javascript" type="text/javascript">
        alert([[${student.name}]]);
    </script>

    <hr>
    <h2>内连css</h2>
    <div id="reddiv">
        我的背景是红色的
    </div>
    <!--    是背景颜色是红色-->
    <style th:inline="css">
        #[[${elementId}]]{
            width:100px;
            height:100px;
            background:[[${bgColor}]];
        }
    </style>

<hr>
<div>
    <p>字面量</p>
<!--    文本字面量-->
    <div>
        <p>文本字面量</p>
        我爱你，<span th:text="'北京'"></span>
    </div>
<!--    数字字面量-->
    <div>
        <p>数字字面量</p>
        3.14+6=<span th:text="'3.14+6'"></span>
    </div>
<!--    布尔字面量-->
    <p>布尔字面量</p>
<div>
    <span th:if="${isClose}==false">欢迎</span>
    <span th:if="${isClose}==true">不欢迎</span>
    <span th:if="${isClose}==FALSE">大写欢迎</span>
    <span th:if="${isClose}==TRUE">大写不欢迎</span>
    <span th:if="${isClose}==False">开头字母大写欢迎</span>
    <span th:if="${isClose}==True">开头大写字母不欢迎</span>
</div>
<!--    null字面量-->
    <p>null字面量</p>
<div>
    <span th:if="${user}==null">对象没有定义</span>
    <span th:if="${studentNull}==null">学生对象空</span>
    <span th:if="${cities}==null">集合长度是0，但是不为null</span>
</div>


    <hr>
    <p>运算符</p>
    <div>
        <p>字符串拼接运算符</p>
        <div th:text="|我的名字叫${student.name}|"></div>
        <p>条件运算符</p>
        <div th:text="${gender}=='male'?'男':'女'"></div>
        <div th:text="${gender=='male'}?'男':'女'"></div>
    </div>

    <div>

    </div>
</div>
</div>
</body>
</html>